<template>
  <div id="AlgorithmOptions"></div>
</template>

<script>
export default {
  name:'AlgorithmOptions',
  methods:{
    // 在算法控制区域添加控件的函数
    addLabelToAlgorithmBar(labelName){
      var element = document.createTextNode(labelName);
      var tableEntry = document.createElement("td");	
      tableEntry.appendChild(element);     
      var controlBar = document.getElementById("AlgorithmSpecificControls");
      controlBar.appendChild(tableEntry);
      return element;
    },
    //// select 标签
    addSelectToAlgorithmBar(optionList) {
      var element = document.createElement("select");
      for (var i=0; i<optionList.length; i++) {
        element.options.add(new Option (optionList[i], optionList[i]) );
      }
      var controlBar = document.getElementById("AlgorithmSpecificControls");  
      controlBar.appendChild(element);
      return element;	
    },
    // checkbox 勾选框
    addCheckboxToAlgorithmBar(boxLabel){
      var element = document.createElement("input");
      element.setAttribute("type", "checkbox");
      element.setAttribute("value", boxLabel);
      var label = document.createTextNode(boxLabel);
      var tableEntry = document.createElement("td");	
      tableEntry.appendChild(element);
      tableEntry.appendChild(label);
      var controlBar = document.getElementById("AlgorithmSpecificControls");
      controlBar.appendChild(tableEntry);
      return element;
    },
    // radio button 单选
    addRadioButtonGroupToAlgorithmBar(buttonNames, groupName){
      var buttonList = [];
      var newTable = document.createElement("table");
      for (var i = 0; i < buttonNames.length; i++)
      {
        var midLevel = document.createElement("tr");
        var bottomLevel = document.createElement("td");
        var button = document.createElement("input");
        button.setAttribute("type", "radio");
        button.setAttribute("name", groupName);
        button.setAttribute("value", buttonNames[i]);
        bottomLevel.appendChild(button);
        midLevel.appendChild(bottomLevel);
        var txtNode = document.createTextNode(" " + buttonNames[i]); 
        bottomLevel.appendChild(txtNode);
        newTable.appendChild(midLevel);	
        buttonList.push(button);
      }
    },
    //添加输入栏
    addInputToAlgorithmBar(type, name) {
      var element = document.createElement("input");
      element.setAttribute("type", type);
      element.setAttribute("value", name);
      element.setAttribute("name", name);
      if (type == "text") {
        element.setAttribute("size","5");
      }
      var tableEntry = document.createElement("td");
      tableEntry.appendChild(element);
      var controlBar = document.getElementById("AlgorithmSpecificControls");
      //Append the element in page (in span).
      controlBar.appendChild(tableEntry);
      return element;
    },
    // 初始化
    algorithmOptionsInit(animManager, width, height) {
      this.animationManager = animManager ; // 动画
      this.canvasWidth = width ; // 画布宽度
      this.canvasHeight = height ; // 画布高度
      this.commands = [] ; // 命令行
    },
    //完成动作
    algorithmOptionsImplementAction(func, val) {
      var retVal = func(val);
      this.animationManager.startNewAnimation(retVal);
    },
    // commands生成函数
    algorithmOptionsCmd() {
      var command = arguments[0];
      for(let i = 1; i < arguments.length; i++)
      {
        command = command + "<cry>" + String(arguments[i]);
      }
      this.commands.push(command);
    }
  }
}

</script>

<style scoped>
  
</style>